<template>
  <div style="margin-top: -15px">
    <div class="body">
      <Row :gutter="14">
        <Card v-bind:class="{ cardDiv1: classType1 ,cardDiv2: classType2}">
          <Tabs :value="tabValue" @on-click="changeTab">
            <TabPane label="搜索" icon="md-search">
              <grid-select v-if="selectShow" @getPickInfo="getPickInfo"></grid-select>
            </TabPane>
            <TabPane label="树形图" icon="md-git-network">
              <grid-tree-vxe v-if="treeShow" @getPickInfo="getPickInfo"></grid-tree-vxe>
            </TabPane>
          </Tabs>
        </Card>
        <card v-if="mapType === 'standardMap' && mapStatistics" style="width: 270px;position: absolute;top:30px;right: 20px;z-index: 1000;font-size: 14px">
          <grid-card-statistics :pickID="pickID" :pickGrade="pickGrade" ref="gridCardStatistics"></grid-card-statistics>
        </card>
        <Card style="width: 150px;position: absolute;bottom:100px;right: 20px;z-index: 1000">
          <div style="text-align: center">
            <span style="color: RGB(87,139,237);font-size: 8px">重点人群：</span>
            <i-switch v-model="Gridswitch" size="large">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </div>
          <div style="text-align: center;margin-top:5px;" v-if="severUserInfo.loginName === 'LM40011'">
            <span style="color: RGB(87,139,237);font-size: 8px">视图切换：</span>
            <i-switch v-model="mapViewMode" size="large" @on-change="mapViewModeChange">
              <span slot="open">3D</span>
              <span slot="close">2D</span>
            </i-switch>
          </div>
          <div style="text-align: center;margin-top:5px;" v-if="severUserInfo.loginName === 'LM40011'">
            <span style="color: RGB(87,139,237);font-size: 8px">场景选择：</span>
            <i-switch v-model="sceneSwitch" size="large">
              <span slot="open">开</span>
              <span slot="close">关</span>
            </i-switch>
          </div>
<!--          <div style="text-align: center;margin-top:5px">-->
<!--            <span style="color: RGB(87,139,237);font-size: 8px">分布热力图：</span>-->
<!--            <i-switch v-model="hotMapSwitch" size="large">-->
<!--              <span slot="open">开</span>-->
<!--              <span slot="close">关</span>-->
<!--            </i-switch>-->
<!--          </div>-->
        </Card>
        <div v-if="mapType === 'standardMap' && standardSwitch">
          <grid-map :pickID="pickID" :pickGrade="pickGrade" :Gridswitch="Gridswitch" ref="UserInfo" @sendGridInfoToStatistics="sendGridInfoToStatistics"></grid-map>
        </div>
        <div v-if="mapType === 'hotMap' && hotMapSwitch">
          <hotmap v-if="hotMapSwitch" :pickID="pickID" :pickGrade="pickGrade"></hotmap>
        </div>
        <div v-if="mapType === 'sceneMap' && sceneSwitch">
          <grid-scene-map :pickID="pickID" :pickGrade="pickGrade"></grid-scene-map>
        </div>
      </Row>
    </div>
  </div>
</template>

<script>
import Hotmap from './components/hotmap'
import GridMap from './components/grid-map'
import GridSelect from './components/grid-select'
import GridTree from './components/grid-tree'
import GridTreeVxe from './components/grid-tree-vxe'
import GridCardStatistics from './components/grid-card-statistics'
import GridSceneMap from './components/grid-scene-map'

export default {
  name: 'index',
  components: { GridSceneMap, GridCardStatistics, GridTreeVxe, GridTree, GridSelect, GridMap, Hotmap },
  data () {
    return {
      // standardMap :标准地图
      // hotMap：热力图
      // sceneMap: 场景图
      mapType: 'standardMap',
      mapViewMode: true, // map视图
      hotMapSwitch: false,
      sceneSwitch: false, // 场景
      Gridswitch: false,
      selectShow: true,
      treeShow: false,
      tabValue: 0,
      searchText: '',
      pickID: '',
      pickGrade: '',
      classType1: true,
      classType2: false,
      severUserInfo: {},
      mapStatistics: true,
      standardSwitch: true
    }
  },
  methods: {
    // 修改图层
    mapViewModeChange (bool) {
      this.$refs.UserInfo.setAMapViewMode(bool)
    },
    // 获取选中级别
    getPickInfo (e1, e2) {
      this.pickID = e1
      this.pickGrade = e2
    },
    // 统计结果
    sendGridInfoToStatistics (e) {
      this.$refs.gridCardStatistics.init(e.grade, e.id)
    },
    // 切换 tab
    changeTab (e) {
      if (e === 0) {
        this.selectShow = false
        this.$nextTick(() => {
          this.classType1 = true
          this.classType2 = false
          this.selectShow = true
          this.treeShow = false
        })
      } else if (e === 1) {
        this.treeShow = false
        this.$nextTick(() => {
          this.classType1 = false
          this.classType2 = true
          this.treeShow = true
          this.selectShow = false
        })
      }
    },
    reload () {
      let pickID = this.pickID
      let pickGrade = this.pickGrade
      this.pickID = ''
      this.pickGrade = ''
      let that = this
      setTimeout(function () {
        that.pickID = pickID
        that.pickGrade = pickGrade
      }, 1000)
    }
  },
  mounted () {
    this.severUserInfo = this.$store.state.user.severUserInfo
  },
  watch: {
    hotMapSwitch (val) {
      if (val) {
        this.mapType = 'hotMap'
        this.standardSwitch = false
        this.mapStatistics = false
        this.$nextTick(() => {
          this.hotMapSwitch = true
        })
      } else {
        this.mapType = 'standardMap'
        this.hotMapSwitch = false
        this.$nextTick(() => {
          this.standardSwitch = true
          this.mapStatistics = true
        })
      }
      this.reload()
    },
    sceneSwitch (val) {
      if (val) {
        this.mapType = 'sceneMap'
        this.standardSwitch = false
        this.mapStatistics = false
        this.$nextTick(() => {
          this.sceneSwitch = true
        })
      } else {
        this.mapType = 'standardMap'
        this.sceneSwitch = false
        this.$nextTick(() => {
          this.standardSwitch = true
          this.mapStatistics = true
        })
      }
      this.reload()
    }
  }
}
</script>

<style scoped>
.title{
  margin: 1.5px 0px;
}
.body>>>.ivu-tabs-nav{
  font-size: 16px;
}
.body>>>.ivu-tabs-nav-scroll{
  color: white;
}
.body>>>.ivu-card-body{
  padding: 8px;
}
.body>>>.ivu-tabs-nav .ivu-tabs-tab{
  padding: 8px 10px;
}
.body>>>.ivu-tabs-bar{
  margin-bottom: 0px;
}
.cardDiv1 {
  width: 230px;
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 1000;
  background: #235CA7;
}
.cardDiv2 {
  width: 300px;
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 1000;
  background: #235CA7;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(255,255,255,0.93);
}

::-webkit-scrollbar-thumb {
  border-radius:5px;
  -webkit-box-shadow: inset 0 0 6px rgba(250, 250, 250, .3);
  background-color: rgba(220,220,220,0.93);
}

::-webkit-scrollbar-corner {
  background-color: rgba(255,255,255,0.93);
}

.search1 {
  width: 200px;
  position: absolute;
  top: 30px;
  left: 300px;
  z-index: 1000;
}

.search_input {
  display: inline-block;
  width: 160px;
}

.search_input /deep/ input {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  background-color: rgba(255,255,255,0.93) !important;
}

.search_btn {
  display: inline-block;
  width: 40px;
  height: 32px;
  cursor: pointer;
  background-color: rgba(45,140,240,0.93);
  color: #fff;
  z-index: 1001;
  font-size: 12px;
  border: 1px solid transparent;
  transition: border 0.2s ease-in-out, background 0.2s ease-in-out, box-shadow 0.2s ease-in-out, -webkit-box-shadow 0.2s ease-in-out;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  vertical-align: middle;
  line-height: normal;
  position: absolute;
  left: 160px;
}

.search_btn:hover {
  background: #57a3f3 !important;
  border-color: #57a3f3 !important;
}

.search_btn:active {
  background: #2b85e4 !important;
  border-color: #2b85e4 !important;
}
/*.body >>> .ivu-form .ivu-form-item-label{*/
/*  color: white;*/
/*  font-size: 16px;*/
/*}*/
/*.body >>> .ivu-form-item{*/
/*  margin-bottom: 0px;*/
/*}*/
.input-card .btn {
  margin-right: 1.2rem;
  width: 9rem;
}
.statistics_2{
  letter-spacing: 20px;
  margin-left: 10px;
  font-size: 16px
}
.statistics_3{
  letter-spacing: 8px;
  margin-left: 10px;
  font-size: 16px
}
.statistics_4{
  letter-spacing: 2px;
  margin-left: 10px;
  font-size: 16px
}
</style>
